<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<h2>输入框</h2>
<div id="app">
    <p>input 元素：</p>
    <input v-model="message" placeholder="编辑我……">
    <p>消息是: {{ message }}</p>

    <p>textarea 元素：</p>
    <p style="white-space: pre">{{ message2 }}</p>
    <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>
=======================================================================
<div id="app1">
    <p>单个复选框：</p>
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>

    <p>多个复选框：</p>
    <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
    <label for="runoob">Runoob</label>
    <input type="checkbox" id="google" value="Google" v-model="checkedNames">
    <label for="google">Google</label>
    <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    <label for="taobao">taobao</label>
    <br>
    <span>选择的值为: {{ checkedNames }}</span>
</div>

================================================================
<div id="app2">
    <input type="radio" id="runoob" value="Runoob" v-model="picked">
    <label for="runoob">Runoob</label>
    <br>
    <input type="radio" id="google" value="Google" v-model="picked">
    <label for="google">Google</label>
    <br>
    <span>选中值为: {{ picked }}</span>
</div>

=================================================================
<div id="app3">
    <select v-model="selected" name="fruit">
        <option value="">选择一个网站</option>
        <option value="www.runoob.com">Runoob</option>
        <option value="www.google.com">Google</option>
    </select>

    <div id="output">
        选择的网站是: {{selected}}
    </div>
</div>
</body>
<script src="../static/js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            message: 'hello vue1!',
            message2: 'hello vue2!'
        }
    })

    var vm1 = new Vue({
        el:'#app1',
        data:{
            checked : false,
            checkedNames: []
        }
    })

    var vm2 = new Vue({
        el:'#app2',
        data:{
            picked: 'Runoob'
        }
    })

    var vm3 = new Vue({
        el:'#app3',
        data:{
            selected:''
        }
    })
</script>
</html>